<template>
	<view class="jx-task flex a-center j-between" v-if="item !== null" @tap="goto('/pages/task-detail?id='+item.id)">
		<view class="rela t-pic">
			<image class="image" :src="item.categoryphoto"></image>
			<view class="is-top abso flex j-center a-center" v-if="item.is_zhiding">
				<view>置顶</view>
			</view>
		</view>
		<view class="ctt">
			<view class="flex j-between a-center">
				<view class="name ecllipse">{{item.title}}</view>
				<view class="flex a-center">
					<view class="coin">
						<image class="image" src="../../static/icon/idx/idx(7).png"></image>
					</view>
					<view class="c-name">{{item.jiangli}}</view>
				</view>
			</view>
			<view class="flex j-center a-center t-name">
				<view>{{item.beizhu}}</view>
			</view>
			<view class="flex j-between a-center percent">
				<u-line-progress active-color="#00D86A" :show-percent="false" :percent="item.jd" height="20"></u-line-progress>
				<view>{{percent}}%</view>
			</view>
			<view class="statics flex j-between a-center">
				<view>已完成：{{item.wcdanshu}}</view>
				<view>剩余：{{item.danshu - item.wcdanshu}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		item:{
			type:Object,
			default:null
		}
	},
	computed:{
		percent(){
			return Math.floor((this.item.wcdanshu / this.item.danshu)*100)
		}
	}
}
</script>

<style lang="scss" scoped>
.jx-task{height: 264rpx;border-radius: 16rpx;background-color: #FFF;padding: 32rpx 24rpx;margin-bottom: 24rpx;
	.ctt{width:430rpx}
	.t-pic{width: 200rpx;height: 200rpx;border-radius: 16rpx;overflow: hidden;
		.is-top{color:#FFF;background-color: rgba(0, 0, 0, .5);width: 96rpx;height: 32rpx;border-radius: 16rpx 0rpx 16rpx 0px;
			left: 0;top:0;z-index: 9;font-size: 20rpx;
		}
	}
	.name,.c-name{font-size: 32rpx;color: #333;}
	.name{width:350rpx;}
	.coin{width: 36rpx;height: 36rpx;margin-right: 8rpx;}
	.t-name{width: 128rpx;height: 32rpx;border-radius: 20rpx;background-color: #f2f2f2;color: #999;font-size: 20rpx;
		margin-top: 16rpx;
	}
	.percent{color: #999;font-size: 24rpx;margin-top: 20rpx;}
	.statics{color:#999;font-size: 24rpx;width: 220rpx;margin-top: 20rpx;}
}
</style>
